<template>
  <div class="tree-page">
    <ARow :gutter="[16, 16]">
      <ACol :span="8">
        <DtTree
            v-bind="bindProps"
            :title="'基础示例，展开第一层'"
            :search="true"
            defaultExpandLevel="1"
        ></DtTree>
      </ACol>

      <ACol :span="8">
        <DtTree
            v-bind="bindProps"
            :title="'自定义右侧按钮'"
            :actionList="actionList"
        ></DtTree>
      </ACol>

      <ACol :span="8">
        <DtTree
            v-bind="bindProps"
            :title="'右键菜单'"
            :beforeRightClick="getRightMenuList"
        >
        </DtTree>
      </ACol>

      <ACol :span="8">
        <DtTree
            ref="treeRef"
            v-bind="bindProps"
            :title="'工具栏使用'"
            :search="true"
            :checkable="true"
            :toolbar="true"
        >
        </DtTree>
      </ACol>

      <ACol :span="8">
        <DtTree
            v-bind="bindProps"
            :title="'自定义插槽'"
        >
          <template #title="item"> {{ item.key }}：{{ item.title }} </template>
        </DtTree>
      </ACol>
    </ARow>
  </div>
</template>

<script lang="ts" setup>
import { TreeActionItem } from '@zm-pkg/ui/es/components/tree/src/type/tree'
import { ContextMenuItem } from '@zm-pkg/ui/es/components/tree/src/type/menu'
import { treeData } from './treeData'


const treeRef = ref(null)

const bindProps = {
  treeData,
}

const actionList: TreeActionItem[] = [
  {
    render: (node) => {
      return h('i', {
        class: 'i mdi:plus tree-icon',
        onClick: () => {
          const { key, _title } = node
          alert(`当前操作的节点为: ${ key } - ${ _title }`)
        }
      })
    }
  }
]

function getRightMenuList( node: any ): ContextMenuItem[] {
  return [
    {
      label: '新增',
      handler: () => {
        console.log('点击了新增', node);
      },
      icon: 'mdi:plus',
    },
    {
      label: '删除',
      handler: () => {
        console.log('点击了删除', node);
      },
      icon: 'mdi:delete-outline',
      divider: true
    },
    {
      label: '复制',
      handler: () => {
        console.log('点击了复制', node);
      },
      icon: 'ic:outline-content-copy',
    },
  ]
}
</script>

<style lang="less" scoped>
.tree-page{
  padding: 20px;
  .ant-col{
    height: 350px;
    border-radius: 5px;


  }
}

:deep(.dt-tree) {
  .tree-action{
    .tree-icon{
      font-size: 16px;
      text-align: center;
      opacity: 0.7;
    }
  }
}


</style>